<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书首页</title>
    <base href="${pageContext.request.contextPath }/">
    <link rel="stylesheet" type="text/css" href="css/common/commonutils.css">
    <link rel="stylesheet" type="text/css" href="css/index/head.css">
    <link rel="stylesheet" type="text/css" href="css/book/index.css">
    <link rel="stylesheet" type="text/css" href="css/index/foot.css">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <!-- 二级分类部分 -->

    <!-- 头部内容 -->
    <div id="head">
        <!-- 最上方的导航栏 -->
        <div id="navigation">
            <ul>
                <c:if test="${empty sessionScope.user }">
                	<li style="margin-right: 30px;">您好，请先登录~</li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">              
                	<li style="margin-right: 30px;">欢迎您，${sessionScope.user.name }</li>
                </c:if>
                <li>当前所在地：地球村</li>
            </ul>
            
            <ul>
                <li>
                    <i id="shoping_cart_logo"></i>
                    <a href="shoppingcart">购物车</a>
                    <b class="shoping_cart_num">${sessionScope.shoppingNum}</b>
                </li>
                <li>|</li>
                <li><a href="orders">我的订单</a></li>
                <li>|</li>
                <li id="my_home"><a href="">我的钱包</a><i>您的余额:${sessionScope.user.balance }</i></li>
                <li>|</li>
                <c:if test="${empty sessionScope.user }">
                	<li><a href="login">登录</a></li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">
                	<li><a href="exit">注销</a></li>
                </c:if>
                <li>|</li>
                <li><a href="register">注册</a></li>
            </ul>
        </div>
    </div>
    <!-- logo图片和搜索框 -->
     <div id="logo_line">
            <a href=""><img id="logo" src="images/uugai.com_1604756139381.png" /></a>
        <div id="search">
            <form>
                <input type="text" />
                <input type="submit" value="" />
            </form>
            <div id="searchbottom">
               	热搜:
                <a href="#">安徒生童话</a>
                <a href="#">三体</a>
                <a href="#">python</a>
            </div>
        </div>
        <!-- 设置购物车和订单 -->
        <div id="cart_order">
            <div id="lib_cart">
                <a href="shoppingcart">
                    <i class="cart_logo"></i>
                   	 购物车
                    <b class="shoping_cart_num">
                    <c:if test="${empty sessionScope.shoppingNum}">0</c:if>
                    <c:if test="${not empty sessionScope.shoppingNum}">${sessionScope.shoppingNum}</c:if>
                    </b>
                </a>
            </div>
            <div id="lib_order">
                <a href="orders">
                    <i id="cart_logo"></i>
                    	我的订单
                </a>
            </div>
        </div>
    </div>
    <!-- 菜单栏 -->
    <div id="menu">
        <ul>
            <li>全部分类</li>
            <!-- 拿到前面八个分类名 -->
            <c:forEach items="${requestScope.categoryByCLevel }" var="category" begin="0" end="7">           		
            		<li><a href="category/${category.id }">${category.name }</a></li>
            </c:forEach>
        </ul>
    </div>

    <!-- 来个logo -->
    <div id="book_logo"><img src=""></div>

    <!-- 内容部分 -->
    <div id="book_content">
        <!-- 第一块最主要的内容 -->
        <div>
            <!-- 设置图书页的第一个模块：包括左侧分类栏和右侧轮播图 -->

            <!-- 二级分类 -->
            <ul id="book_category">
            	<p>${requestScope.bookCategoryName }</p>
            	<c:forEach items="${requestScope.bookCategoryLevel2 }" var="bookCategory">
            		<li>
            			<p>${bookCategory.name }</p>
            			<div>
	            			<c:forEach items="${bookCategory.children }" var="categoryL3" >
	            				<a href="category/${categoryL3.id }">${categoryL3.name }</a>
	            			</c:forEach>
            			</div>
            		</li>
            	</c:forEach>
            </ul>

            <!-- 中部分：包括上面的轮播图和下面的推荐，先设置整体的大盒子布局 -->
            <div id="book_slide">
                <!-- 轮播图最外面的可视盒子 -->
                <div id="book_slide_show">
                    <!-- 轮播图的ul -->
                    <ul>
                        <li><a href="#"><img src="images/book/banner/bicycle-3045580_640.jpg" /></a></li>
                        <li><a href="#"><img src="images/book/banner/cloth-569222_640.jpg" /></a></li>
                        <li><a href="#"><img src="images/book/banner/painting-3135875_640.jpg" /></a></li>
                        <li><a href="#"><img src="images/book/banner/monastery-3130879_640.jpg" /></a></li>
                    </ul>
                    <!-- 轮播图的焦点 -->
                    <ol></ol>
                </div>

                <!-- 推荐部分上方的选项卡 -->
                <div id="book_banner_top">
                    <span>主编推荐</span>
                    <ul>
                        <li>热点阅读</li>
                        <li>热点阅读</li>
                        <li>热点阅读</li>
                        <li>热点阅读</li>
                    </ul>
                </div>
                <!-- 推荐部分下方的内容：图片，只允许八张图片 -->
                <div id="book_banner_content">
                    <!-- 推荐部分下方的内容：图片，只允许八张图片 -->
                    <c:forEach items="${requestScope.editorCommend }" var="book">
                    <a href="book/${book.id }"><img src="${book.image }"></a>
                    </c:forEach>
                </div>
            </div>
            <!-- 右部分：上方的快讯和下方的专题 -->
             <div id="book_extra">
                <ul>
                    <li>热点快讯</li>
                    <li>·<a href="#">震惊，某高校男宿舍竟然发生这种事...震惊，某高校男宿舍竟然发生这种事</a></li>
                    <li>·<a href="#">震惊，某高校男宿舍竟然发生这种事...震惊，某高校男宿舍竟然发生这种事</a></li>
                    <li>·<a href="#">震惊，某高校男宿舍竟然发生这种事...震惊，某高校男宿舍竟然发生这种事</a></li>
                    <li>·<a href="#">震惊，某高校男宿舍竟然发生这种事...震惊，某高校男宿舍竟然发生这种事</a></li>

                </ul>
                <ul>
                    <li><span>新书推荐</span></li>
                    <c:forEach items="${requestScope.booksInSeven }" var="book">
                    <li><a href="book/${book.id}"><img src="${book.image }"></a></li>
                    </c:forEach>
                </ul>
            </div> 

        </div>
        <!-- 新书上架 -->
        <div>
            <!-- 左边的内容 -->
            <div class="books_content">
                <div class="book_flag"><i></i>新书上架</div>
                <!-- 主体 -->
                <div class="book_contain">
                	<c:forEach items="${requestScope.newBookPut }" var="book">
                	<div class="book_one">
                        <!-- 预览图和标题 -->
                        <a href="book/${book.id }">
                            <img class="book_pic" src="${book.image }" />
                            <!-- 标题 -->
                            <p class="book_title">${book.title }</p>
                        </a>
                        <!-- 作者 -->
                        <p class="boot_author">${book.author }</p>
                        <!-- 价格 -->
                        <div class="boot_price">￥:<fmt:formatNumber type="number" pattern="0.00" value="${ book.price * book.discount / 10}" ></fmt:formatNumber><span>${book.price }</span></div>
                    </div>
                	</c:forEach>
                </div>
            </div>
            <!-- 右边的排行榜 -->
            <div class="book_rank">
                <!-- 头 -->
                <p title="新书售卖">新书热卖榜</p>
                <!-- 内容 -->
                <ul>
                	<c:forEach items="${requestScope.newBookRank }" var="rank" varStatus="status">
                		<c:if test="${status.first }">
	                		<li flag="1">
	                        <span>${status.index + 1 }</span>
	                        <a href="book/${rank.id }"><img  src="${rank.image }" /></a>
	                        <div>
	                            <p><a href="">${rank.title }</a></p>
	                            <p>￥:<fmt:formatNumber type="number" pattern="0.00" value="${ rank.price * rank.discount / 10}" ></fmt:formatNumber></p>
	                            <p>${rank.commentNum }评论</p>
	                        </div>                        
	                    	</li> 
                		</c:if>
                		<c:if test="${not status.first }">
                			<li flag="0">
		                        <span>${status.index + 1}</span>
		                        <div>
		                            <p><a href="book/${rank.id }">${rank.title }</a></p>
		                        </div>                        
		                    </li>
                		</c:if>
                	</c:forEach>
                </ul>
            </div>
        </div>

        <!-- 畅销 -->
        <div>
            <!-- 左边的内容 -->
            <div class="books_content">
                <div class="book_flag"><i></i>畅销</div>
                <!-- 主体 -->
                <div class="book_contain">
                    <c:forEach items="${requestScope.bestSellingBook }" var="book">
                	<div class="book_one">
                        <!-- 预览图和标题 -->
                        <a href="book/${book.id }">
                            <img class="book_pic" src="${book.image }" />
                            <!-- 标题 -->
                            <p class="book_title">${book.title }</p>
                        </a>
                        <!-- 作者 -->
                        <p class="boot_author">${book.author }</p>
                        <!-- 价格 -->
                        <div class="boot_price">￥:<fmt:formatNumber type="number" pattern="0.00" value="${ book.price * book.discount / 10}" ></fmt:formatNumber><span>${book.price }</span></div>
                    </div>
                	</c:forEach>
                </div>

            </div>
            <!-- 右边的排行榜 -->
            <div class="book_rank">
                <!-- 头 -->
                <p title="新书售卖">畅销榜</p>
                <!-- 内容 -->
                <ul>
                    <c:forEach items="${requestScope.bestSellingRank }" var="rank" varStatus="status">
                		<c:if test="${status.first }">
	                		<li flag="1">
	                        <span>${status.index + 1 }</span>
	                        <a href="book/${rank.id }"><img  src="${rank.image }" /></a>
	                        <div>
	                            <p><a href="">${rank.title }</a></p>
	                            <p>￥:<fmt:formatNumber type="number" pattern="0.00" value="${ rank.price * rank.discount / 10}" ></fmt:formatNumber></p>
	                            <p>${rank.commentNum }评论</p>
	                        </div>                        
	                    	</li> 
                		</c:if>
                		<c:if test="${not status.first }">
                			<li flag="0">
		                        <span>${status.index + 1}</span>
		                        <div>
		                            <p><a href="book/${rank.id }">${rank.title }</a></p>
		                        </div>                        
		                    </li>
                		</c:if>
                	</c:forEach>
                </ul>
            </div>
        </div>
        <!-- 超值 -->
        <div>
            <!-- 左边的内容 -->
            <div class="books_content">
                <div class="book_flag"><i></i>超值</div>
                <!-- 主体 -->
                <div class="book_contain">
                    <c:forEach items="${requestScope.bestDiscountBook }" var="book">
                	<div class="book_one">
                        <!-- 预览图和标题 -->
                        <a href="book/${book.id }">
                            <img class="book_pic" src="${book.image }" />
                            <!-- 标题 -->
                            <p class="book_title">${book.title }</p>
                        </a>
                        <!-- 作者 -->
                        <p class="boot_author">${book.author }</p>
                        <!-- 价格 -->
                        <div class="boot_price">￥:<fmt:formatNumber type="number" pattern="0.00" value="${ book.price * book.discount / 10}" ></fmt:formatNumber><span>${book.price }</span></div>
                    </div>
                	</c:forEach>
                </div>

            </div>
             <!-- 右边的排行榜 -->
             <div class="book_rank">
                <!-- 头 -->
                <p title="新书售卖">超值榜</p>
                <!-- 内容 -->
                <ul>
                    <c:forEach items="${requestScope.bestDiscountRank }" var="rank" varStatus="status">
                		<c:if test="${status.first }">
	                		<li flag="1">
	                        <span>${status.index + 1 }</span>
	                        <a href="book/${rank.id }"><img  src="${rank.image }" /></a>
	                        <div>
	                            <p><a href="">${rank.title }</a></p>
	                            <p>￥:<fmt:formatNumber type="number" pattern="0.00" value="${ rank.price * rank.discount / 10}" ></fmt:formatNumber></p>
	                            <p>${rank.commentNum }评论</p>
	                        </div>                        
	                    	</li> 
                		</c:if>
                		<c:if test="${not status.first }">
                			<li flag="0">
		                        <span>${status.index + 1}</span>
		                        <div>
		                            <p><a href="book/${rank.id }">${rank.title }</a></p>
		                        </div>                        
		                    </li>
                		</c:if>
                	</c:forEach>
                </ul>
            </div>
        </div>
        <!-- 热点 -->
        <div>
            <!-- 左边的内容 -->
            <div class="books_content">
                <div class="book_flag"><i></i>热点</div>
                <!-- 主体 -->
                <div class="book_contain">
                    <c:forEach items="${requestScope.hotBook }" var="book">
                	<div class="book_one">
                        <!-- 预览图和标题 -->
                        <a href="book/${book.id }">
                            <img class="book_pic" src="${book.image }" />
                            <!-- 标题 -->
                            <p class="book_title">${book.title }</p>
                        </a>
                        <!-- 作者 -->
                        <p class="boot_author">${book.author }</p>
                        <!-- 价格 -->
                        <div class="boot_price">￥:<fmt:formatNumber type="number" pattern="0.00" value="${ rank.price * rank.discount / 10}" ></fmt:formatNumber><span>${book.price }</span></div>
                    </div>
                	</c:forEach>
                </div>

            </div>
             <!-- 右边的排行榜 -->
             <div class="book_rank">
                <!-- 头 -->
                <p title="新书售卖">热点榜</p>
                <!-- 内容 -->
                <ul>
                    <c:forEach items="${requestScope.hotRank }" var="rank" varStatus="status">
                		<c:if test="${status.first }">
	                		<li flag="1">
	                        <span>${status.index + 1 }</span>
	                        <a href="book/${rank.id }"><img  src="${rank.image }" /></a>
	                        <div>
	                            <p><a href="">${rank.title }</a></p>
	                            <p>￥:<fmt:formatNumber type="number" pattern="0.00" value="${ rank.price * rank.discount / 10}" ></fmt:formatNumber></p>
	                            <p>${rank.commentNum }评论</p>
	                        </div>                        
	                    	</li> 
                		</c:if>
                		<c:if test="${not status.first }">
                			<li flag="0">
		                        <span>${status.index + 1}</span>
		                        <div>
		                            <p><a href="book/${rank.id }">${rank.title }</a></p>
		                        </div>                        
		                    </li>
                		</c:if>
                	</c:forEach>
                </ul>
            </div>
        </div>

    </div>
    
    <!-- 尾部 -->
    <div id="footer">Copyright 2020 由小行星个人制作的图书网站</div>
    <script type="text/javascript" src="js/book/slide_show.js"></script>
    <script type="text/javascript">
    	// 设置内容区昨天分类栏里面的样式
    	$('#book_category > li:last > div').css('border','none')
    </script>
</body>

</html>